<template>

  <div class="password-box">
    <div class="pass-title">修改密码</div>
    <div class="recompose-box">
      <div class="step">
        <el-steps :space="200" :active="active" finish-status="success">
          <el-step title="验证密码" />
          <el-step title="设置密码" />
          <el-step title="完成" />
        </el-steps>
      </div>
      <FormerPass v-if="active === 0" @next="next" @setUUID="setUUID" />
      <SetPassword v-else-if="active === 1" :uuid="uuid" @next="next" @last="last" />
      <Accomplish v-else-if="active === 2" />
    </div>
  </div>
</template>

<script>
import Accomplish from '@/views/change-password/component/Accomplish'
import FormerPass from '@/views/change-password/component/FormerPass'
import SetPassword from '@/views/change-password/component/SetPassword'
export default {
  components: {
    Accomplish,
    FormerPass,
    SetPassword
  },
  data() {
    return {
      uuid: '',
      active: 0
    }
  },
  methods: {
    last() {
      if (this.active-- > 3) this.active = 0
    },
    next() {
      if (this.active++ > 2) this.active = 0
    },
    setUUID(uuid) {
      this.uuid = uuid
    }
  }
}
</script>

<style lang='scss' scoped >
.password-box{
  width: 100%;
  height: 100%;
  background: #F5F5F5;
  .pass-title{
    height: 67px;
    color: #3D3D3D;
    padding-left:30px;
    line-height: 67px;
    font-size: 16px;
    font-weight: bold;
    background: #ffffff;
    margin-bottom: 20px;
  }
  .recompose-box{
    height: 564px;
    background: #ffffff;
    padding: 23px 0 0 122px;
    .step{
      margin-top: 56px;
      margin-left: 236px;
      width: 546px;
    }
  }
  /deep/ .pass {
    .el-input{
      width: 270px;
      height: 35px;
      .el-input__inner{
        height: 35px;
      }
    }
  }
  /deep/.new-pass{
    .el-input{
      width: 270px;
      height: 35px;
      .el-input__inner{
        height: 35px;
      }
    }
  }
}
</style>
